<template>
    <div class="kw-dragging-proxy" v-bind:style="cc">
        <div class="proxy-icon">
            <i class="kw-widget-icon" :class="icon"></i>
        </div>
        <span class="proxy-name">{{text}}</span>
    </div>
</template>
<script>
    import { MOVE_START_EVENT, MOVE_EVENT, DRAG_END_EVENT } from '../common/event'
    export default {
      name: 'dragging',
      data() {
        return {
          icon: '',
          type: '',
          text: '',
          cc: {},
          isStart: false
        }
      },
      created() {
        let self = this
        this.$root.EventBus.$on(MOVE_START_EVENT, obj => {
          self.cc = Object.assign({}, self.cc, {
            display: 'none',
            top: obj.clientY + 'px',
            left: obj.clientX + 'px'
          })
          self.icon = obj.icon
          self.type = obj.type
          self.text = obj.text
          self.isStart = true
        })
        this.$root.EventBus.$on(MOVE_EVENT, obj => {
          if (!self.isStart) {
            return
          }
          let clientX = obj.clientX
          let clientY = obj.clientY
          let startX = parseInt(self.cc.left);
          let startY = parseInt(self.cc.top);
          let moveX = clientX - startX + 'px'
          let moveY = clientY - startY + 'px'
          self.cc = Object.assign({}, self.cc, {
            display: 'block',
            top: startY + 'px',
            left: startX + 'px',
            transform: 'translate3d(' + moveX + ',' + moveY + ',0)'
          })
        })
        this.$root.EventBus.$on(DRAG_END_EVENT, () => {
          self.isStart = false
          let startX = self.cc.left;
          let startY = self.cc.top;
          self.cc = Object.assign({}, self.cc, {
            display: 'none',
            top: startY + 'px',
            left: startX + 'px'
          });
          document.querySelector('html').classList.remove('kw-cursor-move');
        })
      }
    }
</script>
